@import "main.less";

.user_menu {
	margin-top:15px;
	margin-bottom:10px;
	padding-bottom:5px;
	border-bottom:@grayLight 1px solid ;
	.logout {
		float:right;
		text-align:right;
		line-height:30px;
		color:@gray;
		width:120px;
	}
	.menus {
		float:left;
		li {
			float:left;
			a {
				font-size:14px;
				font-family:@altFontFamily;
				display:block;
				height:30px;
				width:67px;
				line-height:28px;
				text-align:center;
				&.on {
					background:url("@{userBg}") 0 -144px;
					font-weight:bold;
					color:@white;
				}
			}
		}
	}
}

.user_toolbox {
	float:left;
	width:251px; 
	margin-right:10px;
	background-color:#ffb656;
	.head {
		height:55px;
		background:@white url("@{userBg}") no-repeat  -508px 0;
		.role {
			float:left;
			font-size:@midFontSize;
			font-weight:bold;
			color:darken(@red, 5%);
			width:100px;
			line-height:30px;
			height:30px;
			margin-left:10px;
			text-align:center;
			margin-top:10px;
			position:relative;
			em {
				display:block; 
				position:absolute;
				right:-10px;
				top:0px;
				width:20px;
				height:35px;
				line-height:33px;
				background:url("@{userBg}") no-repeat 0 -33px;
			}
		}
		.msg {
			float:right;
			line-height:46px;
			height:46px;
			padding-right:20px;
			background:url("@{userBg}") no-repeat 80px 10px;
			width:100px;
			&:hover {
				color:@black;
			}
		}
	}
	.foot {
		height:10px;
		background:@white url("@{userBg}") no-repeat  -508px -89px;		
	}
	.body {
		margin:0 5px;
		background-color:@white;
		.user {
			margin-left:10px;
			.avatar_setting {
				overflow:hidden;
				float:left;
				.avatar {
					width:120px;
					height:120px;
					overflow:hidden;
					padding:2px;
					border:1px solid lighten(@grayLight,20%);
					img {
						width:120px;
						height:120px;
					}
				}
				.edit {
					display:block;
					clear:both;
					text-align:center;
					margin-top:5px;
				}
			}
			.user_info {
				float:left;
				margin-left:10px;
				zoom:1;
				overflow:hidden;
				h4 {
					color:@orange;
				}
				.status {
					text-align:left;
					zoom:1;
					overflow:hidden;
					margin-bottom:5px;
					.icon {
						width:40px;
						height:40px;
						display:block;
						background:url("@{userBg}") no-repeat 0 -73px;	
					}
					.data {
						float:left;
					}
				}
				.msg {
					clear:both;
					color:@orange;
					margin-top:10px;
					width:100%;
				}
			}
		}
		
		.wheather {
			clear:both;
			padding:10px 5px;
			background-color:@lightOrange;
			margin-top:10px;
			.info {
				width:118px;
				float:left;
				.icon {
					display:block;
					width:100%;
					height:72px;
					background:url("@{userIcons}") no-repeat 30px -211px;	
				}
				cite {
					text-align:right;
					display:block;
					padding:10px 20px;
				}
			}
			.date {
				text-align:right;
				float:right;
				margin-right:15px;
				font-weight:bold;
				em {color:@orange;}
				strong{font-weight:normal;}
			}
			.tips {
				clear:both;
				width:200px;
				height:44px;
				display:block;
				padding:20px 15px 20px 15px;
				background:url("@{userBg}") no-repeat 1px -377px;	
				strong{display:block; clear:right;}
			}
		}
		
		.toolbox {
			clear:both;
			margin:10px 5px 0 5px;
			h3 {
				display:block;
				font-size:18px;
				font-family:@altFontFamily;
				color:@orange;
				.icon {
					margin-right:10px;
					float:left;
					width:32px;
					height:32px;
					background:url("@{userIcons}") no-repeat -81px 0;	
				}
			}
			.more {
				display:block;
				height:20px;
				width:100%;
				background:url("@{userBg}") no-repeat 1px -195px;	
			}
			.tools {
				overflow:hidden;
				height:390px;
				width:100%;
				li {
					margin-top:5px;
					overflow:hidden;
					zoom:1;
					padding:10px 0;
					height:70px;
					.icon {
						float:left;
						display:block;
						margin:5px ;
						width:62px;
						height:62px;
						margin-right:10px;
					}
					.itool {
						background:url("@{userIcons}") no-repeat -290px -362px;
					}
					.ivideo {
						background:url("@{userIcons}") no-repeat -220px -362px;
					}
					.iplan {
						background:url("@{userIcons}") no-repeat -148px -362px;
					}
					.idoctor {
						background:url("@{userIcons}") no-repeat -8px -362px;
					}
					.istory {
						background:url("@{userIcons}") no-repeat -81px -362px;
					}
					.igame {
						background:url("@{userIcons}") no-repeat -361px -362px;
					}
					.info {
						float:left;
						h4 {
							font-family:@altFontFamily;
						}
						a {
							display:block;
							color:@orange;
							clear:both;
						}
					}
					
					&.on{
						background-color:lighten(@orange,30%);
						a {
							color:@black;
						}
					}
				}
			}
		}
		
	}
}

.app_widgets {
	// begin app widgets
	float:left;
	.widget {
		clear:both;
		width:719px;
		margin-bottom:10px;
		h3 {
			font-size:18px;
			color:@orange;
			font-family:@altFontFamily;
			margin-top:10px;
			.icon {
				display:block;
				margin-right:5px;
				float:left;
				width:32px;
				height:32px;
			}
			.wtools {
				background:url("@{userIcons}") no-repeat 0 0;
			}
			.wfriends {
				background:url("@{userIcons}") no-repeat -80px 0;
			}
			.wfood {
				background:url("@{userIcons}") no-repeat -40px 0;
			}
		}
		.body {
			overflow:hidden;
			width:100%;
			margin-top:10px;
			.arrow {
				display:block;
				width:16px;
				height:8px;
				line-height:8px;
				position:absolute;
				top:-7px;
				left:60px;
				background:url("@{userBg}") no-repeat -59px -472px;	
			}
			.top {
				display:block;
				width:100%;
				height:16px;
				background:@white url("@{userBg}") no-repeat 0px -480px;	
			}
			.bottom {
				display:block;
				width:100%;
				height:6px;
				background:@white url("@{userBg}") no-repeat 0px -560px;	
			}				
			// begin tools
			.used_tools {
				clear:both;
				padding:10px 20px;
				overflow:hidden;
				li { 
					float:left;
					width:113px;
					height:128px;
					text-align:center;
					font-family:@altFontFamily;
					overflow:hidden;
					.icon {
						width:108px;
						height:90px;
						display:block;
					}
					.wtip {
						background:url("@{userIcons}") no-repeat 0px -68px;
					}
					.wplan {
						background:url("@{userIcons}") no-repeat -101px -68px;
					}
					.wart {
						background:url("@{userIcons}") no-repeat -220px -68px;
					}
					.wgame {
						background:url("@{userIcons}") no-repeat -335px -68px;
					}
					.wmusic {
						background:url("@{userIcons}") no-repeat -461px -68px;
					}
					.wvideo {
						background:url("@{userIcons}") no-repeat -566px -68px;
					}
					.title {
						line-height:25px;
						display:block;
						text-align:center;
						width:85px;
						height:25px;
					}
					a {
						font-weight:bold;
						&.on {
							.title {
								color:@white;
								background:url("@{userBg}") no-repeat -72px -143px;	
							}
						}
						&:hover {
							.title {
								color:@black;
								background:url("@{userBg}") no-repeat -605px -143px;	
							}
						}
					}
				}
			}
			
			//begin info
			.info{
				clear:both;
				position:relative;

				// data for used tools
				.data {
					overflow:hidden;
					padding-bottom:5px;
					border-left:1px solid @ripeOrange;
					border-right:1px solid @ripeOrange;
					.basic {
						float:left;
						width:150px;
					}
					.basic_baby_info {
						width:150px;
						float:left;
						text-align:center;
						h5 {
							font-size:@midFontSize;
							font-family:@altFontFamily;
							color:@ripeOrange;
						}
					}
					.detail_baby_info {
						float:left;
						width:560px;
						border-left:1px solid lighten(@ripeOrange, 30%);
						border-bottom:1px solid lighten(@ripeOrange, 30%);
						td {
							border-top:1px solid lighten(@ripeOrange, 30%);
							border-right:1px solid lighten(@ripeOrange, 30%);
							padding:5px 10px;
							text-align:center;
						}
						thead {
							background-color:lighten(@ripeOrange, 40%);
							font-weight:bold;
						}
						tfoot {
							text-align:right;
							a {
								color:@orange;
								margin-right:10px;
							
							}
						}
					}
				}
				
			}				
		}
		// widget title nav
		.wnav {
			margin-left:20px;
			a {
				color:@grayLight;
				font-size:@baseFontSize;
				font-weight:normal;
				&:hover {
					color:@black;
					text-decoration:underline;
				}
				&.on{
					color:@black;
					font-weight:bold;
				}
			}
		}
	}
	
	// widget_groups setting
	.widget_group {
		h2 {
			a {
				width:698px;
				height:44px;
				line-height:44px;
				padding-left:20px;
				font-size:@midFontSize;
				font-family:@altFontFamily;
				color:@white;
				background:url("@{userBg}") no-repeat 0px -242px;	
				display:block;
				clear:both;
				&.on {
					background:url("@{userBg}") no-repeat 0px -302px;	
				}
			}
		}
	}	
	// end app widgets
}


// begin friend info
.friend_info{
	float:left;
	width:251px; 
	margin-right:10px;
	.friend_avatar {
		img {
			width:100%;
		}
		
		.info {
			.icon {
				width:50px;
				height:65px;
				float:left;
				&.boy {
					background:url("@{userIcons}") no-repeat -432px -483px;
				}
			}
			.title {
				width:185px;
				float:left;
				line-height:@largeFontSize;
				color:@gray;
				margin-top:10px;
				margin-left:10px;
				h3 {
					font-size:@largeFontSize;
					width:80px;
					float:left;
					color:@orange;
				}
			}
		}
		// end info
	}	
	
	
	// begin position 
	.position {
		clear:both;
		.icon {
			width:50px;
			height:50px;
			float:left;
			&.pos {
				background:url("@{userIcons}") no-repeat -276px 0;
			}
		}
		a {
			color:@green;
			&:hover {
				color:darken(@green,10%);
			}
		}
	}
	
	
	// friend status
	.status {
		padding:10px;
		background-color:#faf5d6;
		border:1px solid #febe9b;
		overflow:hidden;
		.border-radius(5px);
		li {
			clear:both;
			display:block;
			overflow:hidden;
			margin-bottom:10px;
			&.first {
				border-bottom:1px dotted #febe9b;
			}
			&.last{
				margin:0;
			}
			.icon {
				width:80px;
				height:80px;
				float:left;
				&.health_status{
					background:url("@{userIcons}") no-repeat -336px -480px;
				}
				&.health_status{
					background:url("@{userIcons}") no-repeat -336px -480px;
				}
				&.emotion{
					background:url("@{userIcons}") no-repeat -246px -480px;
				}
			}
			.info {
				float:left;
				width:100px;
				margin:10px 0;
			}
			.gifts {
				float:left;
				width:38px;
				.icon {
					display:block;
					width:36px;
					height:36px;
					&.gift {
						background:url("@{userIcons}") no-repeat -188px 0;
					}
					&.flower {
						background:url("@{userIcons}") no-repeat -240px 0;
					}
				}
			}
			// end gifts
		}
		// endli
		
	}
	// end status
	
	
	// begin visitors
	.visitors {
		clear:both;
		width:100%;
		h3 {
			line-height:36px;
			margin-top:10px;
			color:@orange;
			font-size:@largeFontSize;
			font-family:@altFontFamily;
		}
		
		li {
			clear:both;
			overflow:hidden;
			display:block;
			padding:5px;
			img {
				float:left;
				width:100px;
				border:2px solid @white;
			}
			.info {
				margin:0px 5px;
				float:left;
				overflow:hidden;
				color:@grayLight;
				.adder {
					display:block;
					float:right;
					background:@gray;
					font-weight:bold;
					color:@white;
					margin-top:10px;
					height:18px;
					line-height:16px;
				}
				.name {
					font-size:@largeFontSize;
					font-family:@altFontFamily;
				}
			}
			
			&.on {
				background-color:#ffd954;
				.info .adder{background:#ff0000;}
			}
			
		}
	}
	// end visitors;
	
	
}


// comments for common
.comments {
	clear:both;
	margin-top:10px;
	overflow:hidden;
	.comment {
		clear:both;
		overflow:hidden;
		margin-top:10px;
		.avatar {
			float:left;
			width:48px;
			height:48px;
			padding:1px;
			border:1px solid @grayLighter;
			margin-right:10px;
		}
		.article {
			.author {
				font-size:@midFontSize;
				font-family:@altFontFamily;
				font-weight:bold;
				&:hover {
					color:@orange;
				}
				.date{
					color:@grayLight;
					font-weight:normal;
					font-size:@baseFontSize;
				}
			}
		}
	}
	//end comment
	
	.add_comment {
		clear:both;
		text-align:center;
		background-color:@grayLighter;
		padding:10px;
		margin-top:20px;
		.commenter{
			display:none;
			width:100%;
			height:30px;
			line-height:30px;
			border:1px solid @grayLight;
		}
		
		form {
			overflow:hidden;
			zoom:1;
			textarea {
				width:99%;
			}
			.submit {
				float:right;
				width:80px;
				height:26px;
				line-height:20px;
				text-align:center;
				margin-top:3px;
				font-size:@midFontSize;
				font-family:@altFontFamily;
				background:url("@{userBg}") @grayLighter -240px -196px no-repeat;
				border:0;
			}
		}
	}
}// end comments


// quick menu
.qmenu {
	a{
		margin-right:0;
		font-size:@baseFontSize;
		font-weight:normal;
		&:hover {
			background:lighten(@orange, 30%);
			color:@black;
		}
	}
	ul {
		display:none;
		background:@white;
		width:200px;
		border:1px solid lighten(@orange, 30%);
		li a{
			display:block;
			margin:5px;
		}
	}
}

// painter
.draw-board {
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
	background:@white;
	li {
		float:left;
		margin-right:10px;
	}
	.close {
		float:right;
		width:14px;
		height:14px;
		background:@grayLight;
		text-align:center;
		line-height:12px;
		color:@white;
	}
}

#ayw_draw_board_setsize {
	margin-top:10px;
	a {
		float:left;
		background:@grayLight;
		margin-right:5px;
		border:1px solid @black;
		&.pix1 {width:1px;height:1px; margin-top:6px;}
		&.pix2 {width:2px;height:2px; margin-top:5px;}
		&.pix3 {width:3px;height:3px; margin-top:4px;}
		&.pix4 {width:4px;height:4px; margin-top:3px;}
		&.pix5 {width:5px;height:5px; margin-top:2px;}
		&.pix6 {width:6px;height:6px; margin-top:1px;}
		&.pix7 {width:7px;height:7px;}
	}
}

.jColorSelect {
	overflow:hidden; /* for IE6 */
	border:1px solid #d9dcdd;
}
.jColorSelect div{
	background:url(image/syronex-colorpicker.gif) no-repeat;
	float:left;
	width:13px;
	height:13px;
	cursor:pointer;
	overflow:hidden; /* for IE6 */
	border:1px solid #666666;
	margin:1px;
}

.jColorSelect .checkwht {
	cursor:default;	
	background-position:-13px 0;
}
.jColorSelect .checkblk {
	cursor:default;	
	background-position:-26px 0;
}
